<template>
  <el-menu  class="el-menu-demo"  text-color="#fff" active-text-color="#ffd04b" :unique-opened="true"  :default-active="activeMenu"  @select="handleSelect" v-bind="$attrs" >
    <menu-items :menus="menus"></menu-items>
  </el-menu>
</template>

<script setup lang="ts">
import { MenuItem } from '@/types/menu-item';
import MenuItems from './menu-items.vue';
import {computed, ref, toRefs, watch} from "vue";
import { useRoute } from 'vue-router';

const route = useRoute()
// defineProps<{
//   menus: Array<MenuItem>;
// }>();

const props = defineProps({
  menus: {
    type: Array<MenuItem>,
    default: []
  },
})

// const {menus}=toRefs(menus)
let activeIndex:any =ref('');

const activeMenu = computed(() => {
      const { meta, path } = route
      console.log(route);
      console.log(path);

      if (meta !== null || meta !== undefined) {
        if (meta.activeMenu) {
          return meta.activeMenu
        }
      }
      return path
    })

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  activeIndex=key
}

watch(()=>props.menus,(val)=>{
  console.log(val);

},{immediate:true,deep:true})
</script>

<style lang="scss">
.el-menu {
  // 覆盖element-ui的颜色
  // --el-menu-bg-color: var(--header-bg-color);
}
.el-menu--horizontal {
   // 覆盖element-ui的颜色
  --el-menu-bg-color: var(--header-bg-color);
  border-bottom-color: transparent;
}
.el-menu--horizontal > .el-menu-item {
  border-bottom-color: transparent;
}
.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover,
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: var(--header-hover-bg-color);
}


.el-menu{
  .el-sub-menu{
    .el-menu{
      background-color: #1f2d3d!important;
    }
  }
}

</style>
